/* 基本样式 */  
body {  
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;  
    margin: 0;  
    padding: 20px;  
    background-color: #f5f5f5;  
    color: #333;  
    line-height: 1.6;  
}  
  
/* 标题和注销按钮 */  
h3 {  
    margin: 0 0 15px 0;  
    font-size: 1.1em;  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
}  

#logoutBtn {  
    background-color: #dc3545;  
    color: white;  
    border: none;  
    padding: 5px 10px;  
    border-radius: 5px;  
    cursor: pointer;  
    text-decoration: none;  
    font-size: 0.9em;  
}  

#createBtn {  
    background-color: #dcdc45;  
    color: white;  
    border: none;  
    padding: 5px 10px;  
    border-radius: 5px;  
    cursor: pointer;  
    text-decoration: none;  
    font-size: 0.9em;  
}  
  
main {  
    max-width: 800px;  
    margin: 0 auto;  
    background-color: #fff;  
    padding: 20px;  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
}  
  
.container {  
    max-width: 800px;  
    margin: 0 auto;  
}  
  
/* styles.css */  
  
/* 学生列表容器的样式 */  
.student-list {  
    list-style: none; /* 移除默认的列表样式 */  
    padding: 0; /* 移除默认的列表内边距 */  
}  
  
/* 单个学生条目的样式 */  
.student-item {  
    border: 1px solid #ddd; /* 添加边框 */  
    border-radius: 5px; /* 添加圆角 */  
    padding: 15px; /* 内边距 */  
    margin-bottom: 20px; /* 条目之间的外边距 */  
    overflow: hidden; /* 防止内容溢出容器 */  
}  
  
/* 学生头部的样式 */  
.student-header {  
    cursor: pointer; /* 鼠标悬停时显示小手图标 */  
    display: flex; /* 使用flex布局 */  
    justify-content: space-between; /* 内容两端对齐 */  
    align-items: center; /* 子元素垂直居中 */  
}  

.student-details input {
	border-width: 0px;
}
  
/* 学生头部标题的样式 */  
.student-header h2 {  
    margin: 0; /* 移除标题的默认外边距 */  
    font-size: 18px; /* 标题字体大小 */  
}  
  
/* 切换按钮的样式 */  
.toggle-btn {  
    padding: 5px 10px; /* 内边距 */  
    background-color: #f4f4f4; /* 背景色 */  
    border: none; /* 移除边框 */  
    border-radius: 3px; /* 圆角 */  
    cursor: pointer; /* 鼠标悬停时显示小手图标 */  
    font-size: 14px; /* 字体大小 */  
    transition: background-color 0.3s ease; /* 添加过渡效果 */  
}  
  
/* 切换按钮点击后的样式 */  
.toggle-btn:hover {  
    background-color: #e6e6e6; /* 悬停时的背景色 */  
}  
  
/* 学生详细信息的样式 */  
.student-details {  
    transition: max-height 0.5s ease-in-out; /* 添加过渡效果 */  
    overflow: hidden; /* 隐藏超出部分 */  
    max-height: 0px; /* 初始高度为0，即折叠状态 */  
}  
  
/* 学生详细信息展开后的样式 */  
.student-details.expanded {  
    max-height: 500px; /* 展开状态的最大高度 */  
}  
  
/* 学生详细信息中的段落样式 */  
.student-details p {  
    margin: 0; /* 移除段落的默认外边距 */  
    padding: 5px 0; /* 内边距 */  
    font-size: 16px; /* 字体大小 */  
}
  
.pagination {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    padding: 10px;  
}  
  
.pagination-button {  
    display: flex; /* 确保按钮内容居中 */  
    justify-content: center;  
    align-items: center;  
    margin: 0 5px;  
    padding: 5px 10px;  
    border: 1px solid #ccc;  
    border-radius: 5px;  
    background-color: #fff;  
    cursor: pointer;  
      
    /* 设置一个固定宽度，确保所有按钮大小相同 */  
    width: 30px; /* 使用固定宽度而不是min-width */  
    text-align: center;  
    flex-shrink: 0;  
      
}  
  
.pagination-button.active {  
    background-color: #007bff;  
    color: #fff;  
    border-color: #007bff;  
}  
  
/* 模态对话框样式 */  
.modal {  
  display: none; /* 隐藏模态对话框 */  
  position: fixed; /* 停留在页面的顶部 */  
  z-index: 1; /* 模态对话框在其他内容之上 */  
  left: 0;  
  top: 0;  
  width: 100%; /* 全屏宽 */  
  height: 100%; /* 全屏高 */  
  overflow: auto; /* 启用滚动条如果内容高于浏览器的高度 */  
  background-color: rgb(0,0,0); /* 模态对话框的背景色 */  
  background-color: rgba(0,0,0,0.4); /* 黑色背景带有透明度 */  
}  
  
/* 模态对话框内容 */  
.modal-content {  
  background-color: #fefefe;  
  margin: 15% auto; /* 15% 从顶部开始，水平居中 */  
  padding: 20px;  
  border: 1px solid #888;  
  width: 20%; /* 可以是百分比或像素值 */  
}  
  
/* 关闭按钮 */  
.close {  
  color: #aaa;  
  float: right;  
  font-size: 28px;  
  font-weight: bold;  
  cursor: pointer;  
}  
  
.close:hover,  
.close:focus {  
  color: black;  
  text-decoration: none;  
  cursor: pointer;  
}
  